<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/style1.css" />
		<link rel="stylesheet" type="text/css" href="css/cropper.css" />
		<style type="text/css">
			#popover {
				height: 100px;
				width: 200px;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 5px;
			}
			
			#mobile {
				border: none;
				text-align: right;
				display: inline-block;
				margin: 0;
				padding: 0;
			}
			
			.m-icon-bluev {
				display: inline-block;
				width: 16px;
				height: 16px;
				background-color: #222222;
				position: absolute;
				right: 10%;
				top: 50%;
			}
			
			.signature {
				width: 60%;
				line-height: 25px;
			}
			
			#exit {
				width: 100%;
				text-align: center;
				position: fixed;
				bottom: 10px;
			}
			
			#exit input {
				width: 90%;
				line-height: 0.25rem;
			}
			
			.imgsma-coin {
				position: absolute;
				top: 25%;
				right: 10%;
			}
			
			.inforimg {
				position: relative;
				top: 0;
				right: 8%;
			}
			
			li {
				height: 75px;
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id='header'>
			<a class="mui-action-back mui-icon mui-icon-left-nav white-mid mui-pull-left"></a>
			<h1 class="mui-title white-big">个人信息</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" onclick="galleryImg()">
					<!--<a href="#sheet" id="openSheet" class="mui-navigate-right  mui-btn-block">-->
					<a class="mui-navigate-right  mui-btn-block">
						<p class="mui-pull-right" id='inforimg'>
							<img class="mui-media-object mui-pull-right imgsma-coin" id="headerPic" src="images/header.png">
							<i class="m-icon-bluev"></i></p>
						<div class="mui-media-body ">
							头像
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="nickname.html" class="mui-navigate-right">
						<p class="mui-pull-right inforimg" id="nickname">金木研</p>
						<div class="mui-media-body">
							昵称
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="jianjiedetail.html" class="mui-navigate-right">
						<p class="mui-pull-right signature mui-ellipsis-2 grey-light inforimg" id="description">把每件事当作一事当作一个挑战，事当作一个挑战，把自己活成，把每件事当作一个挑战，把自己活成一个牛逼</p>
						<div class="mui-media-body">
							简介
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<p class="mui-pull-right inforimg" id="mobile">
						</p>
						<div class="mui-media-body">
							手机
						</div>
					</a>
				</li>

			</ul>
			<input type="hidden" id="uid" />
			<!--退出-->
			<div class="mui-input-row blacker-small" id='exit'>
				<input type="button" placeholder="退出登录" value="退出登陆" onclick="logout()">
			</div>

			<!--弹出选项框-换头像-->
			<div class="mui-content mui-active">
				<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
					<!-- 可选择菜单 -->
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#">设置头像</a>
						</li>
						<li class="mui-table-view-cell" onclick="captureImage()">
							<a href="#">拍照</a>
						</li>
						<li class="mui-table-view-cell" onclick="galleryImg()">
							<a href="#">相册</a>
						</li>
					</ul>
					<!-- 取消菜单 -->
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#sheet1"><b>取消</b></a>
						</li>
					</ul>
				</div>
			</div>

			<!--弹出选项框-结束-->

		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/setfontsize.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/config.js"></script>
		<script src="js/cropper.js"></script>
		<script type="text/javascript">
			// 扩展API加载完毕后调用onPlusReady回调函数 
			document.addEventListener("plusready", onPlusReady, false);
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function onPlusReady() {}
			// 从相册中选择图片 
			function galleryImg() {
				mui.openWindow({
					url: 'uploadimage.html',
					id: 'uploadimage'
				});

				/*// 从相册中选择图片
				console.log("从相册中选择图片:");
				plus.gallery.pick(function(path) {
					console.log(path);
					mui.openWindow({
						url: 'uploadimage.html',
						id: 'uploadimage'
						extras: {
							imgpath: path
						}
					});
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image"
				});*/
			}

			// 拍照
			function captureImage() {
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				console.log("Resolution: " + res + ", Format: " + fmt);
				cmr.captureImage(function(path) {
						console.log(path);
					},
					function(error) {
						alert("Capture image failed: " + error.message);
					}, {
						resolution: res,
						format: fmt
					}
				);
			}

			var phonenum = mui('#mobile');

			mui.init();

			var uid = localStorage.getItem("uid");
			var headerPic = localStorage.getItem("headerPic");
			console.log(headerPic);
			$("#headerPic").attr("src",headerPic)
			var nickname = localStorage.getItem("nickname");
			var mobile = localStorage.getItem("mobile");
			var description = localStorage.getItem("description");
			$("#nickname").html(nickname);
			$("#mobile").html(mobile);
			if(description != null && description != "null") {
				$("#description").html(description);
			}
			console.log(uid + "," + nickname + "," + mobile);

			function logout() {
				if(uid == "") {
					mui.toast('户不存在', {
						duration: '2000ms',
						type: 'div'
					})
				}
				mui.ajax(userurl + '/api/user/app/logout', {
					data: {
						uid: uid
					},
					dataType: 'json',
					type: 'post',
					success: function(data) {
						if(data.code == 1) {
							localStorage.removeItem("uid");
							localStorage.removeItem("nickname");
							localStorage.removeItem("mobile");
							localStorage.removeItem("description");
							topagej('home');
						} else {
							console.log(data.code);
							mui.toast('退出失败', {
								duration: '2000ms',
								type: 'div'
							})
						}

					},
					error: function(xhr, type, errorThrown) {
						console.log(type);
					}
				});
			}
		</script>
	</body>

</html>